<template>
    <div class="tab">
        <h3>标签页</h3>
        <div class="head">
            <a href="#" :class=" currentTab == 1 ? 'active' : '' " @click.prevent="changeTab(1)">标签-1</a>
            <a href="#" :class=" currentTab == 2 ? 'active' : '' " @click.prevent="changeTab(2)">标签-2</a>
            <a href="#" :class=" currentTab == 3 ? 'active' : '' " @click.prevent="changeTab(3)">标签-3</a>
        </div>

        <div class="tab_content">
           <ol v-show=" currentTab == 1 ">
               <li>上火星居住-1A</li>
               <li>上火星居住-2</li>
               <li>上火星居住-3</li>
               <li>上火星居住-4</li>
           </ol>
           <ol v-show=" currentTab == 2 ">
               <li>上火星居住-1B</li>
               <li>上火星居住-2</li>
               <li>上火星居住-3</li>
               <li>上火星居住-4</li>
           </ol>
           <ol v-show=" currentTab == 3 ">
               <li>上火星居住-1C</li>
               <li>上火星居住-2</li>
               <li>上火星居住-3</li>
               <li>上火星居住-4</li>
           </ol>
        </div>
    </div>
 
</template>

<script>
export default {
    data(){
        return {
            currentTab:1 //当前是第几个卡片,默认第1个选中
        }
    },
    methods:{
        changeTab(num){
            console.log("点了第几个标签:"+num)
            this.currentTab = num; //保存
        }
    },
    beforeUpdate(){
        console.log("数据有变化，准备更新了")
    },
    updated(){
        console.log("数据有变化，更新完成了")
    }
}
</script>

<style>
    /* 卡片 */
    .tab .head a{margin:0 15px;}
    .tab .head a.active{
        color: rgb(0, 255, 13);
        border-bottom: 3px solid rgb(0, 255, 8);
    }

    /* 内容 */
    .tab_content ol{
        margin-left:0;
        /* display: none; */
    }

    .tab_content ol:first-child{
        /* display: block; */
    }
</style>